<script setup>
import {ref} from 'vue'
import {Search} from "@element-plus/icons-vue";
import {listPracticeHistory} from "../../../api/practice/practice.js";
import moment from "moment";

// 分页
const pageNum = ref(1);
const pageSize = ref(5);
// 题目名称
const practiceName = ref('');
// 总大小
const total = ref(10);
// 历史题目的数据
const practiceHistories = ref([{
  id: '1',
  studentId: '1',
  practiceId: '1',
  name: '1',
  createTime: '1',
  status: '1'
}])
// 题目选择条件
const condition=ref({});
// 题目状态数组
const statusList = ref(['错误', '正确'])

// 查看题目历史记录
const handleListPracticeHistory = async () => {
  condition.value['pageNum'] = pageNum.value;
  condition.value['pageSize'] = pageSize.value;
  condition.value['practiceName'] = practiceName.value;
  await listPracticeHistory(condition.value).then( res =>{
    total.value=res.data.total;
    practiceHistories.value=res.data.data;
  });
}

handleListPracticeHistory();
</script>

<template>
  <el-container class="container-box">
    <el-header style="margin-top: 10px;">
      <el-input
          v-model="practiceName"
          style="width: 240px;float: right;"
          placeholder="请输入课程名称"
      >
        <template #append>
          <el-button :icon="Search" @click="handleListPracticeHistory"/>
        </template>
      </el-input>
      <el-divider style="margin-top: 50px"></el-divider>
    </el-header>
    <el-main class="main-area">
      <el-card v-for="practiceHistory in practiceHistories" :key="practiceHistory" style="margin-bottom: 18px;height: 70px"
               shadow="hover">
        <!--    图片加为文字-->
        <div>{{ practiceHistory.name }}</div>
        <div style="display: flex; justify-content: flex-end; align-items: center; margin-left: auto;margin-right: 40px;">
          <el-tag :effect="'dark'" :type="statusList[practiceHistory.status] === '正确' ? 'success' : 'danger'" style="margin-right: 10px">{{ statusList[practiceHistory.status] }}</el-tag>
          <div>{{ moment(practiceHistory.createTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
        </div>
      </el-card>
      <div class="pagination">
      <el-pagination
          v-model:current-page="pageNum"
          :page-size="pageSize"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, prev, pager, next"
          :total="total"
          @change="handleListPracticeHistory"
          style="display: flex;float: right;"
      />
      </div>
    </el-main>
  </el-container>

</template>

<style scoped lang="less">
.container-box {
  width: 100%;
  height: 75vh;
  .main-area {
    height: 100%;
    width: 100%;
    position: relative
  }
}
.practice {
  height: 100px;
  margin: 10px auto;
}


.management {
  display: flex;
}
.pagination {
  position: absolute;
  bottom: 0; /* 沉底 */
  right: 3%; /* 靠右 */
  display: flex;
  justify-content: right;
}
.button-delete {
  margin-left: 900px;
}
</style>